<template>
  <view class="container">
    <!-- 顶部欢迎区域 -->
    <view class="welcome-section">
      <view class="welcome-text">
        <text class="greeting">你好，旅行者</text>
        <text class="sub-greeting">准备好开始新的旅程了吗？</text>
      </view>
    </view>
    
    <!-- 旅行计划卡片 -->
    <view class="travel-plans">
      <view class="section-title">
        <text>我的旅行计划</text>
      </view>
      
      <view class="plan-cards">
        <view class="plan-card" v-for="(plan, index) in travelPlans" :key="index">
          <view class="card-header" :style="{ backgroundColor: plan.color }">
            <text class="card-title">{{ plan.title }}</text>
            <text class="card-date">{{ plan.date }}</text>
          </view>
          <view class="card-body">
            <view class="card-info">
              <text class="info-label">目的地:</text>
              <text class="info-value">{{ plan.destination }}</text>
            </view>
            <view class="card-info">
              <text class="info-label">天数:</text>
              <text class="info-value">{{ plan.days }}天</text>
            </view>
            <view class="card-actions">
              <button class="action-btn" @click="navigateToCalendar(plan.id)">查看日程</button>
              <button class="action-btn" @click="navigateToMap(plan.id)">查看地图</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 快速操作区域 -->
    <view class="quick-actions">
      <view class="section-title">
        <text>快速操作</text>
      </view>
      <view class="action-buttons">
        <button class="quick-btn" @click="createNewPlan">
          <text class="btn-icon">➕</text>
          <text class="btn-text">新建旅行</text>
        </button>
        <button class="quick-btn" @click="navigateToCalendar()">
          <text class="btn-icon">📅</text>
          <text class="btn-text">查看日历</text>
        </button>
        <button class="quick-btn" @click="navigateToMap()">
          <text class="btn-icon">🗺️</text>
          <text class="btn-text">查看地图</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 示例旅行计划数据
const travelPlans = ref([
  {
    id: 1,
    title: '北京之旅',
    date: '2023-01-20 至 2023-01-25',
    destination: '北京',
    days: 5,
    color: '#4CAF50'
  },
  {
    id: 2,
    title: '上海周末游',
    date: '2023-02-10 至 2023-02-12',
    destination: '上海',
    days: 3,
    color: '#2196F3'
  },
  {
    id: 3,
    title: '成都美食之旅',
    date: '2023-03-05 至 2023-03-10',
    destination: '成都',
    days: 6,
    color: '#FF9800'
  }
]);

// 导航到日历页面
const navigateToCalendar = (planId?: number) => {
  uni.switchTab({
    url: '/pages/calendar/calendar'
  });
};

// 导航到地图页面
const navigateToMap = (planId?: number) => {
  uni.switchTab({
    url: '/pages/map/map'
  });
};

// 创建新旅行计划
const createNewPlan = () => {
  uni.showToast({
    title: '新建旅行功能开发中...',
    icon: 'none'
  });
};
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 欢迎区域样式 */
.welcome-section {
  padding: 40rpx 20rpx;
  margin-bottom: 30rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, #42b983 0%, #33a06f 100%);
}

.welcome-text {
  color: #ffffff;
}

.greeting {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.sub-greeting {
  font-size: 28rpx;
  opacity: 0.9;
}

/* 区块标题样式 */
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
  border-left: 8rpx solid #42b983;
}

/* 旅行计划卡片样式 */
.travel-plans {
  margin-bottom: 40rpx;
}

.plan-cards {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.plan-card {
  background-color: #ffffff;
  border-radius: 15rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  padding: 20rpx;
  color: #ffffff;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
}

.card-date {
  font-size: 24rpx;
  opacity: 0.9;
}

.card-body {
  padding: 20rpx;
}

.card-info {
  display: flex;
  margin-bottom: 10rpx;
}

.info-label {
  font-size: 26rpx;
  color: #666666;
  width: 120rpx;
}

.info-value {
  font-size: 26rpx;
  color: #333333;
  font-weight: 500;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  margin-top: 20rpx;
}

.action-btn {
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  background-color: #f0f0f0;
  color: #333333;
  border-radius: 30rpx;
  line-height: 1.5;
}

/* 快速操作区域样式 */
.quick-actions {
  margin-bottom: 40rpx;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.quick-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  background-color: #ffffff;
  border-radius: 15rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.btn-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.btn-text {
  font-size: 24rpx;
  color: #333333;
}
</style>